<template>
  <div class="app-container">
    <div style="display: flex;flex-wrap: nowrap;">
      <h3>宠物管理</h3>
      <div style="width: 10px;"></div>
      <p>用于管理小区里的宠物信息，包括业主、家庭成员及租户饲养的宠物</p>
    </div>
    <el-card>
      <el-form style="display: flex;flex-wrap: nowrap;" label-width="80px" :inline="true">
        <el-form-item>
          <label style="width: 100%;">宠物名称</label>
          <el-input v-model="queryData.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <label style="width: 100%;">小区名称</label>
          <el-select v-model="queryData.community_code" @change="communityChange" class="m-2" placeholder="请选择">
            <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <label style="width: 100%;">栋数</label>
          <el-select v-model="queryData.building_code" class="m-2" placeholder="请选择">
            <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <label style="width: 100%;">收养时间</label>
          <el-date-picker v-model="queryData.adopt_time" type="datetimerange" range-separator="-" start-placeholder="请选择"
            end-placeholder="请选择" />
        </el-form-item>
      </el-form>
      <div style="height: 50px;"></div>
      <div style="display: flex;justify-content: end;">
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </div>
    </el-card>
    <div style="height: 30px;"></div>
    <!-- 第二张卡片 -->
    <el-card>
      <div style="display: flex;justify-content: end;"><el-button type="primary"
          @click="addFormRef.isShow = true">添加宠物</el-button></div>
      <div style="height: 30px;"></div>
      <!-- 表格 -->
      <Table :table="petTable" :tableData="list" @del="del" @edit="addFormRef.edit($event)">
        <template #community="{ row }">
          {{ row.community?.name }}
        </template>
        <template #building="{ row }">
          {{ row.building?.name }}
        </template>
        <template #membername="{ row }">
          {{ row.member?.name }}
        </template>
        <template #membertel="{ row }">
          {{ row.member?.tel }}
        </template>
        <template #photo="{ row }">
          <div style="width: 100%;" @click="seeBigImg(row)">
            <img :src="row.photo" alt="" style="width: 100%;">
          </div>
        </template>
        <template #create_time="{ row }">
          {{ new Date(row.create_time).toLocaleString() }}
        </template>
      </Table>
      <!-- 分页 -->
      <Pagination v-model:pageNum="queryData.current" v-model:pageSize="queryData.pageSize" :total="total"
        @initData="initData" />
    </el-card>
    <addForm ref="addFormRef" @initData="initData" />
    <!-- 列表查看大图 -->
    <el-dialog v-model="isSeeImg" title="预览" append-to-body width="40%" @close="dialogImageUrl = ''">
      <img style="width: 100%;" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>

<script setup>
import addForm from './addForm.vue';
import { ElMessage } from 'element-plus'
import { usecommunityList } from '@/hooks/owners/member.js'
import { petTable } from '@/hooks/owners/pet.js'
import Table from '@/components/Table/table';
import Pagination from '@/components/Table/Pagination';
import { ref, toRaw, onMounted } from 'vue'
import { getListApi, delListApi } from '@/api/owners/pet.js'
import { getBuildingListApi } from '@/api/owners/member.js'
// ============================================================================
// 小区数据
const communityList = usecommunityList()
const defaultQueryData = {
  name: '',
  pageSize: 2,
  current: 1,
  building_code: '',
  adopt_time: '',
  community_code: '',
}
// 搜索数据
let queryData = reactive({ ...defaultQueryData })
// 总数
const total = ref(0)
// 列表数据
const list = ref([])
const addFormRef = ref(null)
// ============================================================================================
const initData = async () => {
  // console.log(toRaw(queryData));
  queryData.adopt_time = queryData.adopt_time !== '' ? queryData.adopt_time.map(item => +item).join(',') : queryData.adopt_time
  const { data: { count, rows } } = await getListApi(toRaw(queryData))
  // console.log(rows);
  const tabList = rows.map(({ photo, ...item }) => ({ photo: import.meta.env.VITE_APP_BASE_IMG + (photo ? photo.split(',')[0] : '/public/dist/static/empty.1e2fbc24.png'), ...item }))
  total.value = count
  list.value = tabList
}

onMounted(() => {
  initData()
})

// 小区改变获取栋数
const buildingList = ref([])
const communityChange = async (val) => {
  // console.log(val);
  const { data } = await getBuildingListApi(val)
  // console.log(data);
  buildingList.value = data
}

// 搜索
const onSearch = () => {
  queryData.current = 1
  initData()
  ElMessage.success('搜索成功')
}

// 重置
const onReset = () => {
  queryData = Object.assign(queryData, defaultQueryData)
  initData()
  ElMessage.success('重置成功')
}


// 删除
const del = async (id) => {
  // console.log(id);
  await delListApi(id)
  ElMessage.success('删除成功')
  if (queryData.current > 1 && list.value.length === 1) queryData.current--
  initData()
}

// 列表点击看图
let isSeeImg = ref(false)
let dialogImageUrl = ref('')
const seeBigImg = (row) => {
  dialogImageUrl.value = row.photo
  isSeeImg.value = true
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 2%;
}
</style>